<template>
  <div style="padding: 20px">
    <el-card>
      <el-row type="flex" justify="space-between" align="center">
        <el-col>
          <el-form :inline="true">
            <el-form-item>
              <el-input
                v-model="page.role_name"
                placeholder="角色名称"
                name="subject"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                plain
                @click="getRolesList"
              >搜索</el-button>
              <el-button @click="resetBtn">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col>
          <el-row type="flex" justify="end">
            <el-button
              size="medium"
              type="primary"
              plain
              @click="addRoles"
            >创建角色</el-button>
          </el-row>
        </el-col>
      </el-row>
      <el-table
        :data="list"
        border
        :cell-style="{ 'text-align': 'center' }"
        :header-cell-style="{
          'text-align': 'center',
          background: '#fafafa',
          color: '#646464',
        }"
      >
        <el-table-column label="角色ID" width="140" prop="id" />
        <el-table-column label="角色名称" prop="role_name" />
        <el-table-column label="角色标识" prop="identify" />
        <el-table-column label="角色描述" prop="description" />
        <el-table-column label="添加时间" prop="created_at" />
        <el-table-column label="操作">
          <template slot-scope="{row}">
            <el-button type="primary" icon="el-icon-edit" circle @click="editRoles(row)" />
            <el-button type="danger" icon="el-icon-delete" circle @click="delRoles(row.id)" />
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end" style="height: 100px" align="middle">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :page-size="page.limit"
          :current-page="page.page"
          :total="page.total"
          :page-sizes="[2, 5, 10]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </el-card>
    <add-role v-if="boxShow" ref="addRoles" :data="lists" />
  </div>
</template>

<script>
import { getRolesList, deleteRolesList } from '@/api/role'
import { getMenuList } from '@/api/permission'
import addRole from '../components/addRole.vue'
export default {
  name: 'Role',
  components: { addRole },
  data() {
    return {
      list: [],
      page: {
        role_name: '',
        page: 1,
        limit: 10,
        total: null
      },
      boxShow: false,
      lists: []
    }
  },
  created() {
    this.getRolesList()
    this.getLists()
  },
  methods: {
    async getLists() {
      const { data } = await getMenuList()
      this.lists = data
    },
    async getRolesList() {
      const { data } = await getRolesList({
        page: this.page.page,
        limit: this.page.limit,
        role_name: this.page.role_name
      })
      console.log(data)
      this.list = data.list
      this.page.total = data.total
      console.log(this.page.total)
    },
    handleSizeChange(val) {
      this.page.limit = val
      this.getRolesList()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`)
      this.page.page = val
      this.getRolesList()
    },
    resetBtn() {
      this.page.role_name = ''
    },
    addRoles() {
      // this.$refs.addRoles.isShowDialog = true
      this.boxShow = true
    },
    async delRoles(id) {
      try {
        await this.$confirm('确认删除？')
        // console.log(this.list)
        await deleteRolesList(id)
        if (this.list.length === 1 && this.page.page !== 1) {
          this.page.page--
        }
        this.getRolesList()
      } catch (error) {
        console.log(error)
      }
    },
    editRoles(row) {
      // console.log(row)
      this.boxShow = true
      // setTimeout(() => {
      //   const a = this.$refs.addRoles
      //   console.log(a)
      // }, 0)
      this.$nextTick(() => {
        this.$refs.addRoles.formData = row
        this.$refs.addRoles.getMenuList(row.id)
      })
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-input--small .el-input__inner {
  width: 215px;
  padding-right: 30px;
}
::v-deep .el-table__body {
  padding: 0 !important;
  height: 30px;
  line-height: 30px !important;
}
::v-deep .el-table tr {
  height: 57px;
}
::v-deep [data-v-40add2e2] .el-table tr {
  height: 48px;
}
::v-deep .el-link--primary {
  position: relative;
  color: #66b1ff;
  cursor: pointer;
}
</style>
